<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>招聘数据可视化分析系统 - 首页</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
    <!-- 引入 Font Awesome 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <!-- 引入Chart.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>

<body>
    <div class="dashboard">
        <div class="sidebar">
            <div class="sidebar-header">
                <h2>招聘数据可视化分析系统</h2>
            </div>

            <!-- 用户信息卡片 -->
            <div class="user-profile">
                <div class="user-avatar">
                    <i class="fas fa-user-circle" style="font-size: 60px; color: #4A90E2;"></i>
                </div>
                <div class="user-info">
                    <p class="user-greeting">欢迎回来</p>
                    <p class="username">{{ session.user.username }}</p>
                </div>
                <form action="{{ url_for('logout') }}" method="post" class="logout-form">
                    <button type="submit" class="logout-btn">退出登录</button>
                </form>
            </div>

            <!-- 导航菜单 -->
            <nav class="sidebar-nav">
                <ul>
                    <li><a href="{{ url_for('home') }}" class="nav-item active">
                            <span class="nav-icon">🏠</span>
                            <span class="nav-text">首页</span>
                        </a></li>
                    <li><a href="{{ url_for('profile') }}" class="nav-item">
                            <span class="nav-icon">👤</span>
                            <span class="nav-text">个人中心</span>
                        </a></li>
                    <li><a href="{{ url_for('data_management') }}" class="nav-item">
                            <span class="nav-icon">💼</span>
                            <span class="nav-text">数据管理</span>
                        </a></li>

                    <li><a href="{{ url_for('charts') }}" class="nav-item">
                            <span class="nav-icon">📈</span>
                            <span class="nav-text">可视化图表</span>
                        </a></li>
                </ul>
            </nav>
        </div>
        <div class="main-content">
            <!-- 页面头部 -->
            <div class="page-header">
                <div class="page-date">May 4, 2025</div>
                <div class="page-greeting">欢迎：<span class="username-highlight">{{ session.user.username }}</span></div>
            </div>

            <!-- 通过HTML数据属性传递后端数据到JavaScript -->
            <div id="chart-data" data-labels="{{ creation_labels|tojson }}" data-counts="{{ creation_counts|tojson }}">
            </div>

            <!-- 主要内容区域 -->
            <div class="dashboard-container">
                <!-- 最新用户列表 - 占一行 -->
                <div class="card info-card full-width">
                    <div class="card-header">
                        <h3>最新注册用户</h3>
                    </div>
                    <div class="card-content">
                        <table class="user-table">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>用户名</th>
                                    <th>邮箱</th>
                                    <th>注册时间</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for user in recent_users %}
                                <tr>
                                    <td>{{ user.id }}</td>
                                    <td>{{ user.username }}</td>
                                    <td>{{ user.email }}</td>
                                    <td>{{ user.created_at.strftime('%Y-%m-%d') }}</td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="4">暂无用户数据。</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- 最新职位列表 - 占一行 -->
                <div class="card info-card full-width">
                    <div class="card-header">
                        <h3>最新职位</h3>
                        <div class="card-actions">
                            <a href="{{ url_for('data_management') }}" class="action-btn">更多...</a>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="job-list">
                            {% for job in jobs %}
                            <div class="job-item">
                                <div class="job-details">
                                    <div class="job-title">{{ job.title }}</div>
                                    <div class="job-company">{{ job.companyTitle }}</div>
                                    <div class="job-location">{{ job.address }}</div>
                                </div>
                                <div class="job-salary">{{ job.salary }}</div>
                            </div>
                            {% else %}
                            <p>暂无职位信息。</p>
                            {% endfor %}
                        </div>
                    </div>
                </div>

                <!-- 统计卡片网格 -->
                <div class="stats-grid">

                    <!-- 职位总数统计卡片 -->
                    <div class="card stat-card-large">
                        <div class="card-header">
                            <h3>职位总数统计</h3>
                            <div class="card-actions">
                                <button class="action-btn">⚙️</button>
                                <button class="action-btn">[object Object]>
                            </div>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ jobs_count or 5338 }}</div>
                            <div class="stat-label">职位总数</div>
                        </div>
                    </div>

                    <!-- 用户数据统计卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>用户数据统计</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ user_count or 3 }}</div>
                            <div class="stat-label">注册用户数</div>
                        </div>
                    </div>

                    <!-- 公司总数统计卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>公司总数统计</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ companies_count or 32 }}</div>
                            <div class="stat-label">合作公司数</div>
                        </div>
                    </div>

                    <!-- 行业最高学历卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>行业最高学历</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ highest_education or '博士' }}</div>
                            <div class="stat-label">最高学历要求</div>
                        </div>
                    </div>

                    <!-- 行业最高薪资卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>行业最高薪资</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ highest_salary or '50K-80K' }}</div>
                            <div class="stat-label">月薪范围</div>
                        </div>
                    </div>

                    <!-- 行业优势地区卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>行业优势地区</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ top_region or '北京' }}</div>
                            <div class="stat-label">职位最多地区</div>
                        </div>
                    </div>

                    <!-- 最高年薪卡片 -->
                    <div class="card stat-card-medium">
                        <div class="card-header">
                            <h3>最高年薪</h3>
                        </div>
                        <div class="card-content">
                            <div class="stat-number">{{ max_annual_salary or '80万' }}</div>
                            <div class="stat-label">年薪上限</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


</body>

</html>